<script lang="ts" setup>
import Header from "@/components/author/Header.vue";
import {reactive, toRefs} from "vue";
import {useRoute, useRouter} from "vue-router";
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {onBeforeUnmount, ref, shallowRef, onMounted} from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import {ElMessage, type FormInstance} from "element-plus";
import {publishChapter} from "@/api/author";

const mode = ref("simple")
const route = useRoute();
const router = useRouter();
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const chapterFormRef = ref()
const toolbarConfig = {}
toolbarConfig.excludeKeys = [
  'code',//代码
  'insertImage', // 网络图片
  'deleteImage', // 删除图片
  'editImage', // 编辑图片
  'viewImageLink', // 查看链接
  'imageWidth30', // 图片宽度相对于编辑器宽度的百分比30
  'imageWidth50', // 图片宽度相对于编辑器宽度的百分比50
  'imageWidth100', // 图片宽度相对于编辑器宽度的百分比100
  'insertLink', // 插入链接
  'editLink', // 修改链接
  'unLink', // 取消链接
  'viewLink', // 查看链接
  'codeBlock', // 代码块
  'insertVideo', // 插入网络视频
  'uploadVideo', // 上传视频
  'editVideoSize', // 修改视频尺寸
  'uploadImage', // 上传图片
  'group-video',
  'group-image',
  'insertTable'
]
const editorConfig = {placeholder: '请输入内容...'}
const state = reactive({
  isLoading: false,
  bookId: route.query.id,
  chapter: {chapterName: "", chapterContent: "", isVip: 0},
  rules: {
    chapterName: [{required: true, message: '章节名不能为空', trigger: 'blur'}],
    chapterContent: [{required: true, message: '章节内容不能为空', trigger: 'blur'}]
  }
})
const {bookId, chapter, isLoading, rules} = toRefs(state)
const saveChapter = async (formEl: FormInstance | undefined) => {
  if (!state.chapter.chapterName) {
    ElMessage.error("章节名不能为空！");
    return;
  }
  if (!state.chapter.chapterContent) {
    ElMessage.error("章节内容不能为空！");
    return;
  }

  if (state.chapter.chapterContent.length < 50) {
    ElMessage.error("章节内容太少！");
    return;
  }
  try {
    isLoading.value = true
    await publishChapter(state.bookId, state.chapter);
    router.push({name: "authorChapterList", query: {'id': state.bookId}});
  } catch (error) {

  }
  isLoading.value = false;
};
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
const handleCreated = (editor) => {
  console.log(editor.getConfig())
  editorRef.value = editor // 记录 editor 实例，重要！
}
</script>
<template>
  <div class="main">
    <div class="container">
      <div class="top">
        <Header></Header>
      </div>
      <div class="bottom">
        <div class="left">
          <div>
            <RouterLink :to="{'name':'authorBookList'}" class="nav">小说管理</RouterLink>
          </div>
        </div>
        <div class="right">
          <div class="create-book">
            <div class="title">小说章节信息填写</div>
            <div class="form">
              <el-form ref="chapterFormRef" :model="chapter" :rules="rules" label-width="100px">
                <el-form-item label="章节名" prop="chapterName">
                  <el-input v-model="chapter.chapterName" placeholder="请输入章节名"></el-input>
                </el-form-item>
                <el-form-item label="是否vip" prop="isVip">
                  <el-radio-group v-model="chapter.isVip">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="章节内容" prop="chapterContent">
                  <!-- 富文本编辑器 -->
                  <div style="border: 1px solid #ccc;width: 100%">
                    <Toolbar
                        :defaultConfig="toolbarConfig"
                        :editor="editorRef"
                        :mode="mode"
                        style="border-bottom: 1px solid #ccc"
                    />
                    <Editor
                        v-model="chapter.chapterContent"
                        :defaultConfig="editorConfig"
                        :mode="mode"
                        style="height: 500px; overflow-y: hidden;"
                        @onCreated="handleCreated"
                    />
                  </div>
                </el-form-item>

              </el-form>
              <div class="submit">
                <el-button :loading="isLoading" round type="primary" @click="saveChapter(chapterFormRef)">提交
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.main {
  background-color: #F5F5F5;
  padding: 20px;

  .container {
    width: 60%;
    background-color: #fff;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;

    .bottom {
      display: flex;
      //height: 80vh;
      .left {
        flex: 1;
        padding: 10px 0;

        div {
          padding: 10px;
          width: 80%;
          text-align: center;
          border-left: 5px solid #48A4FF;
          background-color: #F5F5F5;

          a {
            text-decoration: none;
          }
        }

        border-right: 2px solid #F5F5F5;
      }

      .right {
        flex: 3;
        padding: 10px;

        .create-book {
          .title {
            font-size: 25px;
          }

          display: flex;
          gap: 30px;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .form {
            padding: 20px;
            border: 1px solid #F5F5F5;
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 80%;

            .submit {
              margin: 0 auto;

              .el-button {
                width: 200px;
              }
            }
          }
        }
      }
    }
  }
}
</style>